<template>
  <div class="login-container">
    <!-- <div class="login-bg"></div> -->
    <div class="login-wrapper">
      <div class="login-box">
        <div class="login-header">
          <img src="@/assets/logo.png" alt="Logo" class="logo">
          <h2>欢迎登录{{isProduction?'后台管理':'[测试版系统]'}}</h2>
          <p>请输入您的账号和密码</p>
        </div>

        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"
          @keyup.enter.native="handleLogin">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user" clearable></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock"
              show-password></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="login-btn" :loading="loading" @click="handleLogin">
              登 录
            </el-button>
          </el-form-item>

          <!-- <div class="login-footer">
            <el-checkbox v-model="rememberMe">记住我</el-checkbox>
            <el-link type="primary" :underline="false">忘记密码?</el-link>
          </div> -->
        </el-form>
      </div>
    </div>

    <div class="copyright">
      <!-- © 2023 公司名称 版权所有 -->
    </div>
  </div>
</template>

<script>
import { login } from '@/api/login';
import { Message } from 'element-ui';
export default {
  name: 'Login',
  data() {
    return {
      isProduction: process.env.VUE_APP_ENV === 'production',
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
        ]
      },
      rememberMe: false,
      loading: false
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          let params = {
            userPhone: this.loginForm.username,
            password: this.loginForm.password
          }
          login(params).then(res => {
            localStorage.setItem('token', res.token);
            localStorage.setItem('user', JSON.stringify({
              userPhone: res.userPhone,
              name: res.userName,
              id: res.id,
              deptId: res.deptId,
              email: res.email,
              roleIds: res.roleIds
            }));
            Message.success('登陆成功')
            this.loading = false
            localStorage.setItem('route', JSON.stringify(res.treePermissions));
            let p = []
            Object.keys(res.permissionCodes).forEach(key => {
              p.push(res.permissionCodes[key])
            })
            localStorage.setItem('permissions', JSON.stringify(p));
            this.$router.replace('/welcome');

          }).catch(err => {
            console.log(err);
            this.loading = false
          })

        }
      })

      // return

    }
  }
}
</script>
<style lang="scss" scoped>
.login-container {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/login_bg.jpg');

  .login-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e5799 0%, #207cca 51%, #2989d8 100%);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    z-index: 1;
  }

  .login-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    padding: 0 20px;

    .login-box {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 8px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      padding: 40px 35px;
      transition: all 0.3s;

      &:hover {
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
      }

      .login-header {
        text-align: center;
        margin-bottom: 30px;

        .logo {
          width: 80px;
          height: 80px;
          margin-bottom: 15px;
        }

        h2 {
          font-size: 24px;
          color: #333;
          margin-bottom: 10px;
        }

        p {
          font-size: 14px;
          color: #999;
        }
      }

      .login-form {
        .el-form-item {
          margin-bottom: 25px;
        }

        .el-input {
          ::v-deep .el-input__inner {
            height: 48px;
            line-height: 48px;
            border-radius: 4px;
          }
        }

        .login-btn {
          width: 100%;
          height: 48px;
          font-size: 16px;
          letter-spacing: 2px;
          border-radius: 4px;
          background: linear-gradient(to right, #3a7bd5, #00d2ff);
          border: none;
        }
      }

      .login-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        font-size: 14px;
      }
    }
  }

  .copyright {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    z-index: 2;
  }
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@media (max-width: 768px) {
  .login-wrapper {
    padding: 0 15px;

    .login-box {
      padding: 30px 25px;
    }
  }
}
</style>